import 'package:flutter/material.dart';
import 'package:flutter_dk_form/src/bean/floating_menu_item.dart';
import 'package:flutter_dk_form/src/callback/floating_menu_callback.dart';

/// 悬浮按钮
/// [menuList]：弹出框数据
/// [preMenuIcon]：悬浮按钮点击前图标
/// [postMenuIcon]：悬浮按钮点击后图标
/// [btnBackgroundColor]：悬浮按钮背景色
/// [callback]：弹出框点击回调
/// [btnText]：悬浮按钮文本
/// [hasAnimation]：弹出框是否有动画（右侧滑入）
class FloatingMenu extends StatefulWidget {
  final List<FloatingMenuItem> menuList;
  final Widget preMenuIcon;
  final Widget postMenuIcon;
  final Color btnBackgroundColor;
  final FloatingMenuCallback callback;
  final String btnText;
  final bool hasAnimation;

  const FloatingMenu(
      {Key key,
      @required this.menuList,
      this.preMenuIcon,
      this.postMenuIcon,
      this.btnBackgroundColor,
      @required this.callback,
      this.btnText = '操作台',
      this.hasAnimation = false})
      : super(key: key);

  @override
  _FloatingMenuState createState() => _FloatingMenuState();
}

class _FloatingMenuState extends State<FloatingMenu>
    with TickerProviderStateMixin {
  bool isFloatClicked = false;
  AnimationController controller;
  Animation<Offset> offset;
  ScrollController _scrollController = new ScrollController();
  AnimationController rotateController;

  @override
  void initState() {
    super.initState();
    rotateController = new AnimationController(
      vsync: this,
      duration: new Duration(milliseconds: 200),
    );

    controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 200));

    offset = Tween<Offset>(begin: Offset.zero, end: Offset(2.0, 0.0))
        .animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Visibility(
          child: Container(
            color: Color(0xCC000000),
          ),
          visible: isFloatClicked,
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: Container(
            padding: EdgeInsets.only(bottom: 103),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                Visibility(
                  visible: !(!widget.hasAnimation && !isFloatClicked),
                  child: Flexible(
                    child: Container(
                      child: _showFloatingOptions(),
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.fromLTRB(0, 0, 16, 0),
                  child: AnimatedBuilder(
                    animation: rotateController,
                    builder: (BuildContext context, Widget _widget) {
                      return Transform.rotate(
                        angle: rotateController.value * 6.3,
                        child: FloatingActionButton(
                          backgroundColor: widget.btnBackgroundColor != null
                              ? widget.btnBackgroundColor
                              : Theme.of(context).accentColor,
                          onPressed: () {
                            _changeFloatingVisibility();
                          },
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              isFloatClicked
                                  ? widget.postMenuIcon != null
                                      ? widget.postMenuIcon
                                      : Icon(Icons.done)
                                  : widget.preMenuIcon != null
                                      ? widget.preMenuIcon
                                      : Icon(Icons.menu),
                              Visibility(
                                child: Text(
                                  widget.btnText,
                                  style: TextStyle(
                                      color: Colors.white, fontSize: 9),
                                ),
                                visible: !isFloatClicked,
                              )
                            ],
                          ),
                        ),
                      );
                    },
                  ),
                )
              ],
            ),
          ),
        )
      ],
    );
  }

  void _changeFloatingVisibility() {
    if (widget.hasAnimation) {
      _scrollController.animateTo(0.0,
          curve: Curves.easeOut, duration: const Duration(milliseconds: 1));
    }

    isFloatClicked = !isFloatClicked;
    setState(() {});
  }

  Widget _showFloatingOptions() {
    if (widget.hasAnimation) {
      if (isFloatClicked) {
        rotateController.forward();
        controller.reverse();
      } else {
        rotateController.reverse();
        controller.forward();
      }
    }

    return SlideTransition(
      position: offset,
      child: ListView.builder(
        reverse: false,
        shrinkWrap: true,
        controller: _scrollController,
        itemCount: widget.menuList.length,
        itemBuilder: (BuildContext context, int index) {
          var menuItem = widget.menuList[index];
          double bottomPadding = 0;
          if (index == widget.menuList.length - 1) {
            bottomPadding = 24;
          }
          return Container(
              padding: EdgeInsets.only(bottom: bottomPadding, right: 26),
              child: InkWell(
                onTap: () {
                  _changeFloatingVisibility();
                  widget.callback.onMenuClick(menuItem);
                },
                child: Container(
                  height: 52,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Text(
                        menuItem.title,
                        style: TextStyle(fontSize: 14, color: Colors.white),
                      ),
                      Visibility(
                        visible: menuItem.icon != null,
                        child: Container(
                          width: 28,
                          height: 28,
                          margin: EdgeInsets.only(left: 13),
                          decoration: BoxDecoration(
                              color: menuItem.backgroundColor != null
                                  ? menuItem.backgroundColor
                                  : Theme.of(context).accentColor,
                              borderRadius: BorderRadius.circular(14)),
                          child: Container(
                              width: 17, height: 17, child: menuItem.icon),
                        ),
                      ),
                    ],
                  ),
                ),
              ));
        },
      ),
    );
  }
}
